<script setup >
// import * as Cesium from 'cesium'
import { onMounted, ref } from "vue";
import {
  KyViewer,
  Line,
  Marker,
  MarkerStyle,
  PolygonCube,
  PolygonStyle,
  Tileset,
} from "../plugins/cesium/index";
import AmapImageryProvider from "../plugins/imagery/amap/AmapImageryProvider.js";
import { lines } from "./lines.js";
import "../plugins/cesium/material/index.js";
import arrowImg from "../assets/arrow.png";
// import lamina from '../assets/lamina.gpx'
import img from "../assets/trackPerson.png";
import {
  formatDate,
  initBillBordByEntity,
  initBillBordByPrimitive,
  initPointByEntity,
  initPointByPrimitive,
} from "../utils";

let kyViewer = null;
let entity = null;
let tileset = null;
const isMove = ref(false);
// 两个点间的时间间隔，s
const timeInterval = 3;
const start = Cesium.JulianDate.fromDate(new Date());
const stop = Cesium.JulianDate.addSeconds(
  start,
  timeInterval * (lines.length - 1),
  new Cesium.JulianDate(),
);
const pointCount = ref(10000);
onMounted(() => {
  initMap();
});

function initMap() {
  // 官网申请的Token
  Cesium.Ion.defaultAccessToken =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxZWVkZGUxZC1hOTUxLTRiN2UtODgwNC01NTU5NGE3N2E5OTMiLCJpZCI6OTE1NzUsImlhdCI6MTY1MTExNjMwMX0._Zy9FObZndU-FXugY1UkGJMwlCmB4jSN1Yk-_5rdw5s";

  kyViewer = new KyViewer("cesiumContainer", {
    animation: false,
    shouldAnimate: true,
    timeline: false,
  });
  // 展示帧数延迟
  kyViewer.scene.debugShowFramesPerSecond = true;
  kyViewer.setCameraFlyTo({
    height: 2308.954150366827,
    longitude: 111.18645021768566,
    latitude: 30.68931947320012,
    heading: 2.3910964146480227,
    pitch: -1.0472053188615917,
    roll: 0.0000023113482017222964,
  });
}

function clickPrimitive() {
  console.time("渲染");
  removeAll();
  initBillBordByPrimitive(kyViewer, pointCount.value, {
    lng: 111.2,
    lat: 30.68,
    height: 20,
    isMove: isMove.value,
  });
  console.timeEnd("渲染");
}

function clickEntity() {
  console.time("渲染");
  removeAll();
  initBillBordByEntity(kyViewer, pointCount.value, {
    lng: 111.2,
    lat: 30.68,
    height: 20,
    isMove: isMove.value,
  });
  console.timeEnd("渲染");
}

function removeAll() {
  // 先清除所有primive
  kyViewer.scene.primitives.removeAll();
  // entities
  kyViewer.entities.removeAll();
}
</script>

<template>
  <div id="cesiumContainer"></div>
  <div class="interType flex gap-2">
    <div class="text-white my-auto">点位数目</div>
    <el-input v-model.number="pointCount" class="w-[200px]" />
    <div class="text-[#fff] my-auto">是否移动</div>
    <el-checkbox v-model="isMove" />

    <el-button type="primary" @click="clickPrimitive">渲染primitive</el-button>
    <el-button type="primary" @click="clickEntity">渲染entity</el-button>
    <el-button @click="removeAll">清空图层</el-button>
  </div>
</template>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}

.interType {
  position: absolute;
  top: 40px;
  left: 30px;
}
</style>
